<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性练习</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 进行字符串拼接 -->
			<h1>{{id + ' ' +name}}</h1>
			<!-- 2个 max 语法 -->
			<h1>{{id}} {{name}}</h1>
			<!-- 利用方法实现 -->
			<h1>{{getMsg()}}</h1>
			<!-- 利用方法实现 -->
			<h1>{{msg}}</h1>
			
			<hr >
			<h1>计算属性高级用法-计算图书的总价</h1>
			<h2>{{books[0].price + books[1].price + books[2].price}}元</h2>
			<h2>{{totalPrice}}元</h2>
		</div>
		
		
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script>
			
			const app = new Vue({
				el: "#app",
				data: { 
					id : "110",
					name : "公安局",
					books : [{id:100,name:"java编程思想",price: 98},{id:101,name:"mysql从入门到放弃",price: 36},
					{id:102,name:"Linux运维",price: 100}
					]
				},
				//通过方法获取计算属性.  按照属性的方式为参数起名
				computed: {
					msg : function(){
						
						return this.id + " " + this.name;
					},
					totalPrice : function(){
						let totalPrice = 0;
						/* for(let i=0;i<this.books.length;i++){
							totalPrice += this.books[i].price;
						} */
						
						/* es6的写法 */
						/* for(let i in this.books){
							totalPrice += this.books[i].price;
						} */
						
						for(let book of this.books){
							
							totalPrice += book.price;
						}
						
						return totalPrice;
					}
				},
				methods:{
					getMsg : function(){
						
						return this.id + " " + this.name;
					}
				}
				
			});
			
			
		</script>
	</body>
</html>
